<template>
	<!-- 作业查询模块-任务查询-新契约任务历史查询页面 -->
	<div class="fillcontain">
		<!-- 查询条件 -->
		<div class="fastQuery">
			<el-row>
				<el-col :span="2" class="fastQuery_title"><i class="el-icon-tickets"></i><span> 查询条件</span></el-col>
				<el-col :span="10">
				</el-col>
				<el-col :span="4" class="moreCondition">
					<span v-if="!isShow" @click="showorhide">更多条件 <i class="el-icon-d-arrow-right"></i></span>
					<span v-if="isShow" @click="showorhide">收起 <i class="el-icon-d-arrow-left"></i></span>
				</el-col>
				<el-col :span="8"></el-col>
			</el-row>
		</div>
		<el-form v-show="isShow" :model="searchParams" label-width="100px" class="search_container">
			<el-row>
				<el-col :span="6" class="common-box">
					<el-form-item label="受理号" prop="caseno">
						<el-input v-model="searchParams.caseno" placeholder="受理号" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="common-box">
					<el-form-item label="保单号" prop="chdrnum">
						<el-input v-model="searchParams.chdrnum" placeholder="保单号"
							oninput="if(value.length>8) value=value.slice(0,8)" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="common-box">
					<el-form-item label="任务级别" prop="level">
						<el-select v-model="searchParams.level" placeholder="任务级别" clearable>
							<el-option v-for="item in levels" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="common-box">
					<el-form-item label="被保人姓名" prop="insured">
						<el-input v-model="searchParams.insured" placeholder="被保人姓名" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6" class="common-box">
					<el-form-item label="投保人姓名" prop="spolicyer">
						<el-input v-model="searchParams.spolicyer" placeholder="投保人姓名" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="common-box">
					<el-form-item label="分公司" prop="orgId">
						<el-select v-model="searchParams.orgId" placeholder="分公司" clearable>
							<el-option v-for="item in companylist" :key="item.SBUSIORGID" :label="item.SORGNAME"
								:value="item.SBUSIORGID"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="common-box">
					<el-form-item label="险种类型" prop="risk">
						<el-select v-model="searchParams.risk" placeholder="险种类型" clearable>
							<el-option v-for="item in insmains" :key="item.value" :label="item.name"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="common-box">
					<el-form-item label="组号" prop="groupno">
						<el-input v-model="searchParams.groupno" placeholder="组号" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6" class="common-box">
					<el-form-item label="存仓号" prop="depotno">
						<el-input v-model="searchParams.depotno" placeholder="存仓号" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="common-box">
					<el-form-item label="任务上传时间(起始)：" prop="tskbgntime">
						<el-date-picker v-model="searchParams.tskbgntime" type="date" value-format="yyyy-MM-dd"
							format="yyyy-MM-dd" placeholder="选择日期" @change="clearTimeSetDefault">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="common-box">
					<el-form-item label="任务上传时间(结束)：" prop="tskendtime">
						<el-date-picker v-model="searchParams.tskendtime" type="date" value-format="yyyy-MM-dd"
							format="yyyy-MM-dd" placeholder="选择日期" @change="clearTimeSetDefault">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<!--<el-col :span="6" class="common-box">
					<el-form-item label="扫描时间(起始)：" prop="begintime">
						<el-date-picker v-model="searchParams.begintime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
							placeholder="选择日期" @change="clearTimeSetDefault">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="common-box">
					<el-form-item label="扫描时间(结束)：" prop="lasttime">
						<el-date-picker v-model="searchParams.lasttime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
							placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
				</el-col>-->
				<el-col :span="6" class="common-box">
					<el-form-item label="电子投保标识" prop="appFrom">
						<el-select v-model="searchParams.appFrom" placeholder="电子投保标识" clearable>
							<el-option v-for="item in appFroms" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6" class="common-box">
					<el-form-item label="电子投保标识号" prop="serno">
						<el-input v-model="searchParams.serno" placeholder="电子投保标识号" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="common-box">
					<el-form-item label="最近处理时间(起始)：" prop="dealbegintime">
						<el-date-picker v-model="searchParams.dealbegintime" type="date" value-format="yyyy-MM-dd"
							format="yyyy-MM-dd" placeholder="选择日期" @change="clearTimeSetDefault">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="common-box">
					<el-form-item label="最近处理时间(结束)：" prop="deallasttime">
						<el-date-picker v-model="searchParams.deallasttime" type="date" value-format="yyyy-MM-dd"
							format="yyyy-MM-dd" placeholder="选择日期" @change="clearTimeSetDefault">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="common-box">
					<el-form-item label="操作员" prop="distribution_user_id">
						<el-input v-model="searchParams.distribution_user_id" placeholder="操作员" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
        <!--    第二被保人需求  start          -->
        <el-col :span="6" class="common-box">
          <el-form-item label="第二被保人姓名" prop="secondInsuredName">
            <el-input clearable v-model="searchParams.secondInsuredName" placeholder="第二被保人姓名"></el-input>
          </el-form-item>
        </el-col>
        <!--    第二被保人需求  end          -->
				<el-col :span="6" class="text_center" style="float: right;">
					<el-button type="primary" icon="el-icon-search" @click="search"></el-button>
					<el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
				</el-col>
			</el-row>
		</el-form>
		<div class="contain">
			<!-- 查询结果 -->
			<div class="table_container">
				<el-table v-loading="loading" :data=" tableData" highlight-current-row
					header-cell-class-name="table-header-class" style="width:100%">
					<!-- <el-table-column
                type="selection"
                width="55">
                </el-table-column> -->
					<el-table-column min-width="120" property="checkoutid" label="检出人" align='center'
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="100" property="risk" label="保单类型" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="100" property="orgname" label="机构" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="50" property="channel" label="渠道" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="100" property="chdrnum" label="保单号" align='center'
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="80" property="caseno" label="受理号" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="100" property="spolicyer" label="投保人" align='center'
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="100" property="insured" label="被保险人" align='center'
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="120" property="crtableName" label="主合同名称" align='center'
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="100" property="tasklevel" label="任务级别" align='center' sortable
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="100" property="routeidName" label="任务状态" sortable align='center'
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="160" property="sapptime" label="受理日" align='center'
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column property="dealtime" min-width="160" label="最近处理时间" align='center'
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="100" property="issamecustom" label="多保单标记" align='center'
						show-overflow-tooltip>
						<template slot-scope="scope">
							<el-link type="primary" @click="showMorePolicy(scope.row.policyholderno)"
								v-if="scope.row.issamecustom == '0'" :disabled="!interceptVip(scope.row,scope.index)">{{scope.row.policyholderno}}
							</el-link>
							<span type="primary" v-if="scope.row.issamecustom != '0'">{{scope.row.policyholderno}}
							</span>
						</template>
					</el-table-column>
					<el-table-column min-width="80" property="groupno" label="组号" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="120" property="historyhandler" label="历史处理人" align='center'
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column property="remark" label="备注" align='center' show-overflow-tooltip min-width="120">
						<template slot-scope="scope">
							<el-link type="primary" @click="showRemark(scope.row.taskno)" :disabled="!interceptVip(scope.row,scope.index)">{{ scope.row.remark }}
							</el-link>
						</template>
					</el-table-column>
					<el-table-column min-width="80" fixed="right" label="流转记录" align='center' show-overflow-tooltip>
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="showChange(scope.row.taskno)" :disabled="!interceptVip(scope.row,scope.index)">流转记录</el-button>
						</template>
					</el-table-column>
					<el-table-column min-width="80" label="修改记录" align='center'>
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="showModify(scope.row.taskno)" :disabled="!interceptVip(scope.row,scope.index)">修改记录</el-button>
						</template>
					</el-table-column>
					<el-table-column min-width="80" label="影像信息" align='center'>
						<template slot-scope="scope">
							<!-- <el-button type="text" size="small" icon="el-icon-camera" @click="showImage(scope.row)">影像信息</el-button>  -->
							<span class="operationIcon" @click="showImage(scope.row)" :style="{'pointer-events':!interceptVip(scope.row, scope.index) ? 'none': ''}">
								<el-tooltip class="item" effect="light" content="影像信息" placement="top">
									<i class="el-icon-camera"></i>
								</el-tooltip>
							</span>
						</template>
					</el-table-column>
				</el-table>
				<el-row>
					<el-col :span="24">
						<div class="pagination">
							<el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes"
								:page-size="paginations.pageSize" :layout="paginations.layout"
								:total="paginations.total" :current-page='paginations.pageIndex'
								@current-change='handleCurrentChange' @size-change='handleSizeChange'>
							</el-pagination>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<!-- 备注 -->
		<remark-list :business="'NB'" :taskNo="remarkTaskNo" :drawer="showRemarkFlag" @close="hideRemark"></remark-list>
		<!-- 流转记录 -->
		<task-change-list :business="'NB'" :taskNo="changeTaskNo" :drawer="showChangeFlag" @close="hideChange">
		</task-change-list>
		<!-- 修改记录 -->
		<nb-modify-record :taskNo="modifyTaskNo" :drawer="showModifyFlag" @close="hideModify"></nb-modify-record>
		<!--影像列表-->
		<cdfs-image-list :drawer="showImageFlag" :applnum="showImageApplnum" @close="hideImage"></cdfs-image-list>
		<!-- 同被保人多保单-->
		<more-policy-list :business="'NB'" :policyholderno="morePolicyPolicyholderno" :drawer="showMorePolicyFlag"
			@close="hideMorePolicy"></more-policy-list>

	</div>
</template>

<script>
	import constant from '@/utils/constant';
	import taskConstants, {
		getSelectList
	} from '@/utils/taskConstants';
	import {
		getSsyOrgMap
	} from '@/api/taskCenter/taskCommon';
	import RemarkList from "../../taskCenter/remarkList";
	import nbModifyRecord from "./modify";
	import MorePolicyList from "../../taskCenter/morePolicyList";
	import taskChangeList from "../../taskCenter/taskChangeList";
	import TaskConstants, {
		call
	} from "@/api/taskManager/common"
	import cdfsImageList from "@/page/common/cdfsImageList";
	import {
		getCompanylist,
	} from "@/api/taskManager/distributeTask";
	import {
		isCntainChinese,
		checkName,
		isNotNumber
	} from "@/api/refund/RefundCommon";
	export default {
		components: {
			RemarkList,
			taskChangeList,
			nbModifyRecord,
			cdfsImageList,
			MorePolicyList
		},
		data() {
			return {
				emptySearchParams: {}, //空的查询
				isShow: false,
				levels: TaskConstants.level, //任务级别
				companylist: [], //分公司
				insmains: TaskConstants.insmain, //险种类型
				remarkTaskNo: "",
				showRemarkFlag: false,
				changeTaskNo: "",
				showChangeFlag: false,
				modifyTaskNo: "",
				showModifyFlag: false,
				showImageFlag: false,
				showImageApplnum: '',
				morePolicyPolicyholderno: "",
				showMorePolicyFlag: false,
				searchParams: {
					searchType: 'history',
					type: 'end', //历史查询end节点
					spolicyer: '',
					insured: '',
					appFrom: '',
					serno: '',
					level: '',
					risk: '',
					tskbgntime: '',
					tskendtime: '',
					dealbegintime: '',
					deallasttime: '',
					orgId: '',
					chdrnum: '',
					caseno: '',
					depotno: '',
					groupno: '',
					distribution_user_id: '',
					pageNumber: '',
					pageSize: '',
          secondInsuredName: "", // 第二被保人姓名
				},
				ssyMap: {},
				loading: false,
				tableData: [],
				appFroms: [],
				//需要给分页组件传的信息
				paginations: {
					total: 0, // 总数
					pageIndex: 1, // 当前位于哪页
					pageSize: 10, // 1页显示多少条
					pageSizes: [5, 10, 15, 20], //每页显示多少条
					layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
				},
			}
		},
		activated() {
			document.onkeydown = (event) => {
				var e = event || window.event || arguments.callee.caller.arguments[0];
				if (e && e.keyCode == 113) {
					this.search();
				}
			};
		},
		created() {
			this.emptySearchParams = JSON.parse(JSON.stringify(this.searchParams));
			// this.getList();
		},
		mounted() {
			getCompanylist().then(data => this.companylist = data);
			this.appFroms = getSelectList(taskConstants.appFrom);
			getSsyOrgMap().then(data => this.ssyMap = data);
		},
		methods: {
			showMorePolicy(morePolicyPolicyholderno) {
				// vip数据管控start
                if(morePolicyPolicyholderno.indexOf("*") !== -1){
                    this.$message({
                        message: '该数据为vip保单,暂无操作权限!',
                        type: 'error'
                    });
                    return false
                }
                // vip数据管控end
				this.morePolicyPolicyholderno = morePolicyPolicyholderno;
				this.showMorePolicyFlag = true;
			},
			hideMorePolicy() {
				this.morePolicyPolicyholderno = '';
				this.showMorePolicyFlag = false;
			},
			showImage(row) {
				// vip数据管控start
                if(row.taskno.indexOf("*") !== -1){
                    this.$message({
                        message: '该数据为vip保单,暂无操作权限!',
                        type: 'error'
                    });
                    return false
                }
                // vip数据管控end
				this.showImageApplnum = row.caseno;
				this.showImageFlag = true;
			},
			hideImage() {
				this.showImageApplnum = "";
				this.showImageFlag = false;
			},
			showModify(taskno) {
				// vip数据管控start
                if(taskno.indexOf("*") !== -1){
                    this.$message({
                        message: '该数据为vip保单,暂无操作权限!',
                        type: 'error'
                    });
                    return false
                }
                // vip数据管控end
				this.modifyTaskNo = taskno;
				this.showModifyFlag = true;
			},
			hideModify() {
				this.modifyTaskNo = "";
				this.showModifyFlag = false;
			},
			showRemark(taskNo) {
				// vip数据管控start
                if(taskNo.indexOf("*") !== -1){
                    this.$message({
                        message: '该数据为vip保单,暂无操作权限!',
                        type: 'error'
                    });
                    return false
                }
                // vip数据管控end
				this.remarkTaskNo = taskNo;
				this.showRemarkFlag = true;
			},
			hideRemark() {
				this.remarkTaskNo = "";
				this.showRemarkFlag = false;
			},
			showorhide() {
				this.isShow = !this.isShow;
			},
			show() {
				this.$store.dispatch('loading/CHANGE_LOADING', true);
			},
			cancle() {
				this.$store.dispatch('loading/CHANGE_LOADING', false)
			},
			showChange(taskNo) {
				// vip数据管控start
                if(taskNo.indexOf("*") !== -1){
                    this.$message({
                        message: '该数据为vip保单,暂无操作权限!',
                        type: 'error'
                    });
                    return false
                }
                // vip数据管控end
				this.changeTaskNo = taskNo;
				this.showChangeFlag = true;
			},
			hideChange() {
				this.changeTaskNo = "";
				this.showChangeFlag = false;
			},
			clearTimeSetDefault(val) {
				if (val == null) {
					val = '';
				}
			},
			getOrgName(value) {
				for (var key in this.ssyMap) {
					if (this.ssyMap[key]["sbusiorgid"] && this.ssyMap[key]["sbusiorgid"] == value) {
						value = this.ssyMap[key]["sorgname"]
						break;
					}
				}
				return value;
			},
			// 查询列表
			getList() {
				this.paginations.total = 0;
				this.tableData = [];
				this.searchParams.pageNumber = this.paginations.pageIndex;
				this.searchParams.pageSize = this.paginations.pageSize;
				this.show();
				call(TaskConstants.apis['history'], this.searchParams, "post").then(res => {
					if (res.resultCode == constant.SUCCESS && res.data && res.data.list.length) {
						let pageData = res.data;
						this.paginations.total = pageData.total;
						this.paginations.currentPage = pageData.pageNum;
						this.tableData = pageData.list;
						this.tableData.forEach(item => {
							item["orgname"] = this.getOrgName(item.orgname);
						})
					} else {
						this.$message.error("无符合条件任务！");
					}
					this.cancle();
				}).catch(err => {
					console.log(err);
					this.cancle();
				})
			},
			// 每页多少条切换
			handleSizeChange(pageSize) {
				this.paginations.pageSize = pageSize;
				this.getList();
			},
			// 上下分页
			handleCurrentChange(page) {
				this.paginations.pageIndex = page;
				this.getList();
			},
			// 根据条件查询列表
			search() {
				if (this.searchParams.chdrnum != "") {
					if (isNotNumber(this.searchParams.chdrnum) || this.searchParams.chdrnum.length != 8) {
						this.$message.error("请正确输入保单号！");
						return;
					}
				}
				if (this.searchParams.caseno != "" && isNotNumber(this.searchParams.caseno)) {

					this.$message.error("请正确输入受理号！");
					return;

				}
				if (this.searchParams.depotno != "" && isCntainChinese(this.searchParams.depotno)) {
					this.$message.error("请正确输入存仓号！");
					return;
				}
				if (this.searchParams.groupno != "" && isCntainChinese(this.searchParams.groupno)) {
					this.$message.error("请正确输入组号！");
					return;
				}
				if (this.searchParams.insured != "" && checkName(this.searchParams.insured)) {
					this.$message.error("请正确输入被保人姓名！");
					return;
				}
				if (this.searchParams.spolicyer != "" && checkName(this.searchParams.spolicyer)) {
					this.$message.error("请正确输入投保人姓名！");
					return;
				}
				if (this.searchParams.tskbgntime && this.searchParams.tskendtime) {
					let oDate1 = new Date(this.searchParams.tskbgntime);
					let oDate2 = new Date(this.searchParams.tskendtime);
					if (oDate1.getTime() > oDate2.getTime()) {
						this.$message.error("任务起始时间不能大于结束时间！");
						return;
					}
				}
				//				if (this.searchParams.begintime && this.searchParams.lasttime){
				//					let oDate3 = new Date(this.searchParams.begintime);
				//					let oDate4 = new Date(this.searchParams.lasttime);
				//					if(oDate3.getTime() > oDate4.getTime() ){
				//						this.$message.error("扫描起始时间不能大于结束时间！");
				//						return;
				//					}
				//              }
				if (this.searchParams.dealbegintime && this.searchParams.deallasttime) {
					let oDate5 = new Date(this.searchParams.dealbegintime);
					let oDate6 = new Date(this.searchParams.deallasttime);
					if (oDate5.getTime() > oDate6.getTime()) {
						this.$message.error("最近处理起始时间不能大于结束时间！");
						return;
					}
				}
				this.getList();
			},
			// 清除查询条件
			resetSearch() {
				this.searchParams = JSON.parse(JSON.stringify(this.emptySearchParams));
			},
			// vip权限拦截
      		interceptVip(row,index) {
          		let rowStr = JSON.stringify(row);
          		if (rowStr.indexOf("*") > -1) {
            		return false;
          		}
          		return true;
      		},
		},
	}
</script>

<style lang="less" scoped>
	.fillcontain {
		padding-bottom: 0;

		.fastQuery {
			padding: 15px 20px 10px 20px;
			background: #fff;
			border-bottom: 1px solid #e1e1e1;

			.fastQuery_title {
				color: #666;
				padding: 6px 0px;
			}

			.fastQuery_item {
				margin: 0 10px;
			}

			.item_default {
				.el-button {
					color: #409EFF !important;
					border-color: #c6e2ff !important;
					background-color: #ecf5ff !important;
				}

			}

			.moreCondition {
				color: #68a3fc;
				cursor: pointer;
				padding: 6px 0px;

				.el-icon-d-arrow-right {
					transform: rotate(90deg);
				}

				.el-icon-d-arrow-left {
					transform: rotate(-90deg);
				}
			}
		}
	}

	.contain {
		background: #fff;
		padding: 10px;
		margin-bottom: 20px;
	}

	.pagination {
		padding: 10px 20px;
		text-align: right;
	}

	.operationIcon {
		// padding: 12px;
		border: 1px solid #e5e5e5;
		border-radius: 50%;
		width: 22px;
		height: 22px;
		display: inline-block;
		cursor: pointer;
		box-shadow: 0 0 3px #f9f9f9;
	}

	.search_container {
		padding: 20px 20px 0 20px;
		//    border-top: 1px solid #e1e1e1;
	}

	.common-box {
		padding-bottom: 10px;
	}

	.common-lab {
		line-height: normal !important;
		text-align: right;

		.labelName {
			text-align: right;
		}
	}
</style>
